<template>
  <div>
    <div class="header">
      <img src="http://192.168.2.116:52711/assets/images/banner-penic.png" alt="">
      <div class="nav">
        <div class="logo">
          <img src="http://192.168.2.116:52711/assets/images/login/u-logo.png" alt="">
          <p>{{schoolName}}</p>
        </div>
        <div class="menu">
          <el-menu
            class="el-menu-demo"
            mode="horizontal"
            router
            :default-active="$route.path"
          >
            <el-menu-item
              style="padding: 0; margin-right: 60px; font-size: 16px; display: flex; align-items: center;"
              v-for="(item,index) in navList"
              :key="index" :index="item.url"
            >
              <i class="iconfont mr-5" :class="item.icon"></i>
              {{item.name}}
            </el-menu-item>
          </el-menu>
        </div>
        <theme-picker style="float: right; height: 26px; margin: -3px 8px 0 0;" @change="themeChange" />
        <div class="user">
          <el-popover
            placement="bottom"
            trigger="click">
            <div class="popover">
              <ul>
                <li>
                  切换身份：
                  <el-select @change="changeStatus(value)" style="width: 80px;" size="mini" v-model="value" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </li>
                <li @click="goPortal">门户网站</li>
                <li @click="changePassword">修改密码</li>
                <li @click="back">退出</li>
              </ul>
            </div>
            <div class="admin pointer" slot="reference">
              <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3863823676,2961251940&fm=58" alt="">
              <p>{{userName}}</p>
              <i class="el-icon-arrow-down ml-10 mt-3"></i>
            </div>
          </el-popover>
        </div>
      </div>
    </div>
    <router-view/>
  </div>
</template>

<script>
import ThemePicker from '@/components/ThemePicker/index'
import { toggleClass } from '_utils/Request'
import '@/assets/style/theme/custom-theme/index.css'
export default {
  name: 'Header',
  components: { ThemePicker },
  data () {
    return {
      navList: [], // 导航列表
      isHome: true, // 是否在首页
      schoolName: '无锡市鼎昊实验小学', // 学校名称
      userName: 'JAVA之父', // 用户名
      options: [{ // 用户下拉选择
        value: 1,
        label: '老师'
      }, {
        value: 2,
        label: '家长'
      }],
      value: 1, // 当前身份
      portalUrl: '',
      themeColor: '2bbb59'
    }
  },
  watch: {
    themeColor () {
      toggleClass(document.body, 'custom-theme')
    }
  },
  methods: {
    /**
     * 获取header模块
     */
    getNavModule () {
      let paramNavModule = {
        orgId: this.$storage.get('orgId')
      };
      this.$api.getNavModule(paramNavModule).then(res => {
        this.navList = res;
      })
    },
    /**
     * 选择身份的方法
     * @param {number}value 选择的value
     */
    changeStatus (value) {
      switch (value) {
        case 1:
          window.location.href = 'teacher.html';
          break;
        case 2:
          window.location.href = 'family.html';
          break;
      }
    },
    /**
     * 跳转到门户网站
     */
    goPortal () {
      this.$router.push(this.portalUrl)
    },
    /**
     * 修改密码
     */
    changePassword () {

    },
    /**
     * 退出
     */
    back () {
      window.location.href = 'index.html'
    },
    themeChange (val) {
      this.$store.commit('setThemeColor', val);
    }
  },
  created () {
    this.getNavModule()
  },
  mounted () {

  }
}
</script>

<style scoped lang="scss">
  .header {
    margin-bottom: 16px;
    min-width: 1200px;

    > img {
      width: 100%;
      height: 120px;
      display: block;
    }

    .nav {
      width: 100%;
      height: 60px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .logo {
        display: flex;
        align-items: center;
        flex: 1;

        img {
          width: 40px;
          height: 30px;
          margin: 0 20px;
        }
      }

      .user {
        position: absolute;
        right: 40px;
        height: 60px;
      }

      .menu {
        flex: 3.5;
      }

      .admin {
        height: 60px;
        display: flex;
        align-items: center;

        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 16px;
        }
      }
    }
  }

  .popover {
    ul {
      li {
        font-size: 16px;
        margin-bottom: 10px;
        cursor: pointer;

        &:nth-last-child(1) {
          margin-bottom: 0;
        }
      }
    }
  }
</style>
